<%-- 
    Document   : homePage
    Created on : Mar 28, 2013, 2:53:37 PM
    Author     : tiwtiger
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<link href="css/block.css" type="text/css" rel="stylesheet"/>
<link href="css/homePage.css" type="text/css" rel="stylesheet"/>

<script type="text/javascript" src="js/commonjs.js"></script>
<script type="text/javascript">
    var artistDoc;
    var songDoc;
    var albumDoc;

    function displaySong(index1, index2){
        var path = "${pageContext.request.contextPath}/xml/Songs.xml";
        songDoc = loadXMLDoc(path);
        var songs = songDoc.getElementsByTagName("Song");
        var song = [];
        var mv = [];

        for(var i=0;i<songs.length;i++){
            var songID = songs[i].getElementsByTagName("SongID")[0].firstChild.nodeValue;
            var songTitle = songs[i].getElementsByTagName("SongTitle")[0].firstChild.nodeValue;
            var views = songs[i].getElementsByTagName("SongViews")[0].firstChild.nodeValue;
            var likeNumber = songs[i].getElementsByTagName("LikeNumber")[0].firstChild.nodeValue;
            var isMVs = songs[i].getElementsByTagName("isMV")[0].firstChild.nodeValue;
            var artists = songs[i].getElementsByTagName("Artist");
            var artist = [];

            for(var j=0;j<artists.length;j++){
                var artistID = artists[j].getElementsByTagName("ArtistID")[0].firstChild.nodeValue;
                var artistName = artists[j].getElementsByTagName("ArtistName")[0].firstChild.nodeValue;
                artist.push({
                    artistID:artistID,
                    artistName:artistName
                });
            }//end for

            if(isMVs == "false"){
                song.push({
                    songID:songID,
                    songTitle:songTitle,
                    views:views,
                    likeNumber:likeNumber,
                    isMVs:isMVs,
                    artist:artist
                });
            }else{
                mv.push({
                    songID:songID,
                    songTitle:songTitle,
                    views:views,
                    likeNumber:likeNumber,
                    isMVs:isMVs,
                    artist:artist
                });
            }//end if-else
        }//end for
        sortByViews(song);
        sortByViews(mv);

        if(index1>song.length){
            index1=song.length;
        }

        var history = historyxml

        var outputSong="<ul class='list_content'>"
            +"<div class='list_content_header'>BÀI HÁT NỔI BẬT</div>";
        for (var i=0;i<index1;i++){
            outputSong += "<li class='song'>"
                +"<p class='song_title'>"
                +"<a href='musicplayer.jsp?id="+song[i].songID+"&type=1'>"+song[i].songTitle+"</a>"
                +"</p>"
                +"<p class='artist_name'>"
                +"<a href='artist.jsp?ArtistID="+song[i].artist[0].artistID+"'>"+song[i].artist[0].artistName+"</a>"
                +"</p>"
                +"</li>";
        }// end for
        outputSong += "</ul>";
        document.getElementById("output_hot_songs").innerHTML = outputSong;


        if(index2>mv.length){
            index2=mv.length;
        }
        
        var outputMV="<ul class='list_content'>"
            +"<div class='list_content_header'>MUSIC VIDEO NỔI BẬT</div>";
        for (var i=0;i<index2;i++){
            outputMV += "<li class='song'>"
                +"<p class='song_title'>"
                +"<a href='musicplayer.jsp?id="+mv[i].songID+"&type=4'>"+mv[i].songTitle+"</a>"
                +"</p>"
                +"<p class='artist_name'>"
                +"<a href='artist.jsp?ArtistID="+mv[i].artist[0].artistID+"'>"+mv[i].artist[0].artistName+"</a>"
                +"</p>"
                +"</li>";
                
        }// end for
        outputMV += "</ul>";
        document.getElementById("output_hot_mvs").innerHTML = outputMV;
        

    }

    function displayAlbum(index){
        var path = "${pageContext.request.contextPath}/xml/Albums.xml";
        albumDoc = loadXMLDoc(path);
        var albums = albumDoc.getElementsByTagName("Album");
        var rs = [];

        for (var i=0;i<albums.length;i++){
            var albumID = albums[i].getElementsByTagName("AlbumID")[0].firstChild.nodeValue;
            var albumTitle = albums[i].getElementsByTagName("AlbumTitle")[0].firstChild.nodeValue;
            var artistID = albums[i].getElementsByTagName("ArtistID")[0].firstChild.nodeValue;
            var artistName = albums[i].getElementsByTagName("ArtistName")[0].firstChild.nodeValue;
            var albumCoverSRC = albums[i].getElementsByTagName("AlbumCoverSRC")[0].firstChild.nodeValue;
            var views = albums[i].getElementsByTagName("AlbumViews")[0].firstChild.nodeValue;
            var albumDateCreated = albums[i].getElementsByTagName("AlbumDateCreated")[0].firstChild.nodeValue;

            rs.push({
                albumID:albumID,
                albumTitle:albumTitle,
                artistID:artistID,
                artistName:artistName,
                albumCoverSRC:albumCoverSRC,
                views:views,
                albumDateCreated:albumDateCreated
            });
        }

        sortByViews(rs);
        if(index>rs.length){
            index=rs.length;
        }
        var output="<ul class='list_content'>"
            +"<div class='list_content_header'>ALBUM NỔI BẬT</div>";
        for (var i=0;i<index;i++){
            var imgSRC;
            if (rs[i].albumCoverSRC==null ){
                imgSRC = "img/DefaultAlbumCover.jpg";
            }else imgSRC = "db/"+rs[i].artistName.removeDotCharacter()+"/Album/"+rs[i].albumTitle+"/"+rs[i].albumCoverSRC;
            output += "<li class='item'>"
                +"<div class='item_img'>"
                +"<a href='musicplayer.jsp?id="+rs[i].albumID+"&type=2'>"
                +"<img src='"+imgSRC+"'/>"
                +"</a>"
                +"</div>"
                +"<p class='first_title'>"
                +"<a href='musicplayer.jsp?id="+rs[i].albumID+"&type=2'>"+rs[i].albumTitle+"</a>"
                +"</p>"
                +"<p class='second_title'>"
                +"<a href='artist.jsp?ArtistID="+rs[i].artistID+"'>"+rs[i].artistName+"</a>"
                +"</p></li>";
        }// end for
        output += "</ul>";
        document.getElementById("output_hot_albums").innerHTML = output;
    }
</script>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Home Page</title>

    </head>
    <body onload="displayAlbum(10);displaySong(10,10)">
        <!-- Include TOP  -->
        <%@include file="masterpage_top.jsp" %>

        <!-- MAIN CONTENT  -->
        <div id="middle">
            <div id="middle_content">
                <div id="output_hot_albums"></div>
                <div id="output_hot_songs"></div>
                <div id="output_hot_mvs"></div>
            </div>
        </div>


        <!-- Include BOTTOM  -->
        <%@include file="masterpage_bottom.jsp" %>
    </body>
</html>
